<template>
  <div style="margin-bottom: 50px">
    <div style=" width: 800px; margin: 0 auto;background: #FFFFFF">
      <div
        style="width: 800px;height:200px;display: flex;flex-direction: row" class="top-logo">
        <div style="width: 270px;height: 45px;margin:8px 22px;display: flex;flex-direction: row;">
          <span style="margin: 20px 55px;color: #FFFFFF;font-size: 16px;">{{$t("uninstall.editorUninstall")}}</span>
        </div>
        <div style="width: 340px;height: 145px;margin: 75px 40px;display: flex;flex-direction: column">
          <span style="font-size: 26px;color: #FFFFFF">{{$t("uninstall.thanks")}}</span>
          <span style="font-size: 12px;color: #FFFFFF;margin-top: 17px">{{$t("uninstall.hope")}}</span>
        </div>
      </div>
      <div class="main" style="width: 800px;background-color: white">

        <div style="width: 725px;height:30px;margin: 11px 30px;">
          <span style="font-size: 16px; color: #398CFF;">{{$t("uninstall.reason")}}</span>
        </div>
        <div id="mytable" ref="mytable">
          <div style="margin-left: -24px;">
            <div style="width: 660px; margin: 0 auto;">
              <table border="0" cellpadding="0" cellspacing="0">
                <tbody>
                <tr>
                  <td width="330px">
                    <span style="font-weight: bold; font-size: 14px">{{$t("uninstall.experience")}}</span>
                    <br>
                    <br>
                    <table id="CheckBoxList3"
                           style="line-height: 25px; font-size: 12px; color: #666666; vertical-align: middle">
                      <tbody>
                      <tr>
                        <td><input id="CheckBoxList3_0" type="checkbox" name="CheckBoxList3$0"
                                   class="myBox" style="width: 16px;height:16px;vertical-align:middle ;"><label
                          for="CheckBoxList3_0" style="margin-left: 10px;">{{$t("uninstall.interface")}}</label></td>
                      </tr>
                      <tr>
                        <td><input id="CheckBoxList3_1" type="checkbox" name="CheckBoxList3$1"
                                   class="myBox" style="width: 16px;height:16px;vertical-align:middle ;"><label
                          for="CheckBoxList3_1" style="margin-left: 10px;">{{$t("uninstall.terminology")}}</label></td>
                      </tr>
                      <tr>
                        <td><input id="CheckBoxList3_2" type="checkbox" name="CheckBoxList3$2"
                                   class="myBox" style="width: 16px;height:16px;vertical-align:middle ;"><label
                          for="CheckBoxList3_2" style="margin-left: 10px;">{{$t("uninstall.operation")}}</label></td>
                      </tr>
                      <tr>
                        <td><input id="CheckBoxList3_3" type="checkbox" name="CheckBoxList3$3"
                                   class="myBox" style="width: 16px;height:16px;vertical-align:middle ;"><label
                          for="CheckBoxList3_3" style="margin-left: 10px;">{{$t("uninstall.preview")}}</label></td>
                      </tr>
                      <tr>
                        <td><input id="CheckBoxList3_4" type="checkbox" name="CheckBoxList3$4"
                                   class="myBox" style="width: 16px;height:16px;vertical-align:middle ;"><label
                          for="CheckBoxList3_4" style="margin-left: 10px;">{{$t("uninstall.projects")}}</label></td>
                      </tr>
                      </tbody>
                    </table>
                  </td>
                  <td valign="top">
                    <span style="font-weight: bold; font-size: 14px">{{$t("uninstall.function")}}</span>
                    <br>
                    <br>
                    <table id="CheckBoxList2" style="line-height: 25px; font-size: 12px; color: #666666;">
                      <tbody>
                      <tr>
                        <td><input id="CheckBoxList2_0" type="checkbox" name="CheckBoxList2$0"
                                   class="myBox" style="width: 16px;height:16px;vertical-align:middle ;"><label
                          for="CheckBoxList2_0" style="margin-left: 10px;">{{$t("uninstall.make")}}</label></td>
                      </tr>
                      <tr>
                        <td><input id="CheckBoxList2_1" type="checkbox" name="CheckBoxList2$1"
                                   class="myBox" style="width: 16px;height:16px;vertical-align:middle ;"><label
                          for="CheckBoxList2_1" style="margin-left: 10px;">{{$t("uninstall.lack")}}</label></td>
                      </tr>
                      <tr>
                        <td><input id="CheckBoxList2_2" type="checkbox" name="CheckBoxList2$2"
                                   class="myBox" style="width: 16px;height:16px;vertical-align:middle ;"><label
                          for="CheckBoxList2_2" style="margin-left: 10px;">{{$t("uninstall.many")}}</label></td>
                      </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
                <tr style="height: 35px">
                  <td></td>
                  <td></td>
                </tr>
                <tr>
                  <td width="330px" valign="top">
                    <span style="font-weight: bold; font-size: 14px">{{$t("uninstall.performance")}}</span>
                    <br>
                    <br>
                    <table id="CheckBoxList1" style="line-height: 25px; font-size: 12px; color: #666666;">
                      <tbody>
                      <tr>
                        <td><input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0"
                                   class="myBox" style="width: 16px;height:16px;vertical-align:middle ;"><label
                          for="CheckBoxList1_0" style="margin-left: 10px;">{{$t("uninstall.crashes")}}</label></td>
                      </tr>
                      <tr>
                        <td><input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1"
                                   class="myBox" style="width: 16px;height:16px;vertical-align:middle ;"><label
                          for="CheckBoxList1_1" style="margin-left: 10px;">{{$t("uninstall.cpu")}}</label></td>
                      </tr>
                      <tr>
                        <td><input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2"
                                   class="myBox" style="width: 16px;height:16px;vertical-align:middle ;"><label
                          for="CheckBoxList1_2" style="margin-left: 10px;">{{$t("uninstall.compatible")}}</label></td>
                      </tr>
                      <tr>
                        <td><input id="CheckBoxList1_3" type="checkbox" name="CheckBoxList1$3"
                                   class="myBox" style="width: 16px;height:16px;vertical-align:middle ;"><label
                          for="CheckBoxList1_3" style="margin-left: 10px;">{{$t("uninstall.antivirus")}}</label></td>
                      </tr>
                      <tr>
                        <td><input id="CheckBoxList1_4" type="checkbox" name="CheckBoxList1$4"
                                   class="myBox" style="width: 16px;height:16px;vertical-align:middle ;"><label
                          for="CheckBoxList1_4" style="margin-left: 10px;">{{$t("uninstall.flicker")}}</label></td>
                      </tr>
                      </tbody>
                    </table>
                  </td>
                  <td valign="top">
                    <span style="font-weight: bold; font-size: 14px">{{$t("uninstall.other")}}</span>
                    <br>
                    <br>
                    <table id="CheckBoxList4" style="line-height: 25px; font-size: 12px; color: #666666;">
                      <tbody>
                      <tr>
                        <td><input id="CheckBoxList4_0" type="checkbox" name="CheckBoxList4$0"
                                   class="myBox" style="width: 16px;height:16px;vertical-align:middle ;"><label
                          for="CheckBoxList4_0" style="margin-left: 10px;">{{$t("uninstall.help")}}</label></td>
                      </tr>
                      <tr>
                        <td><input id="CheckBoxList4_2" type="checkbox" name="CheckBoxList4$2"
                                   class="myBox" style="width: 16px;height:16px;vertical-align:middle ;"><label
                          for="CheckBoxList4_2" style="margin-left: 10px;">{{$t("uninstall.reinstall")}}</label></td>
                      </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div style="text-align: left; margin-left: -20px">
            <div style="margin: 0 auto;width: 660px">
              <div style="font-weight: bold; font-size: 12px;margin-top: 20px">{{$t("uninstall.otherReason")}}</div>
              <div style="margin-top: 15px">
                                <textarea name="TextBox1" id="mytext" rows="2" cols="20"
                                          style="height:60px;width:650px;border: 1px solid #EEEEEE"
                                          v-model="unloadCause"></textarea>
              </div>
              <div style="margin-top: 15px; font-size: 12px; color: #666666;width: 652px">
                {{$t("uninstall.contact")}}
              </div>
              <div style="margin-top: 15px">
                <input name="TextBox2" id="myEmail" type="text" maxlength="100"
                       style="border: 1px solid #EEEEEE; font-size: 12px; width: 360px; height: 36px; line-height: 36px; padding-left: 15px"
                       v-model="email" :placeholder="emailText">
              </div>
            </div>
            <div style="height: 10px"></div>
          </div>
        </div>
        <div style="margin-top: 16px; text-align: center; ">
          <button class="btn-sub" @click="subData"
                  style="width: 180px;height:42px;font-size: 18px;background-color:#398CFF;border-radius: 5px; border: none;color: #FFFFFF;font-family: PingFangSC-Medium">
            {{$t("uninstall.submit")}}
          </button>
        </div>
      </div>
    </div>
    <div id="tips" class="tips" :hidden='tips'>
      <img :src="resultIcon"/>
      <span>{{msg}}</span>
    </div>
  </div>
</template>

<script>
  import ajax from '../../common/ajax'
  import api from '../../common/api'

  let language

  export default {
    name: "Uninstall",
    data() {
      return {
        unloadCause: '',
        email: '',
        culture: '',
        messageHtml: '',
        resultIcon: '../../images/icon_error.png',
        msg: '',
        tips: true,
      }
    },
    computed: {
      emailText(){
        return language === 'zh-cn' ? '电子邮件' : 'email'
      }
    },
    created() {
      this.culture = this.$route.query.culture
      language = this.$route.query.culture
    },
    methods: {
      subData() {
        let that = this

        let param = {
          unloadCause: this.unloadCause,
          email: this.email,
          culture: this.culture,
          messageHtml: this.$refs.mytable.innerHTML,
        }
        if (this.unloadCause === "") {
          this.msg = (language === 'zh-cn' ? '请输入卸载原因' : 'Please enter the UnloadCause')
          this.resultIcon = require('../../assets/images/icon_error.png')
          this.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
        } else if (this.email === "") {
          this.msg = (language === 'zh-cn' ? '请输入邮箱地址' : 'Please enter email address')
          this.resultIcon = require('../../assets/images/icon_error.png')
          this.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
          $("#myEmail").focus()
        } else if (this.email.indexOf('@') === -1) {
          this.msg = (language === 'zh-cn' ? '邮箱格式错误！' : 'Wrong Email Format！')
          this.resultIcon = require('../../assets/images/icon_error.png')
          this.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
          $("#myEmail").focus()
        } else {
          ajax.post({
            url: api.uninstall.routeName + '?r=' + Math.random(),
            data: param,
            success: function (res) {
              that.msg = '提交成功'
              that.resultIcon = require("../../assets/images/ico_success.png")
              that.tips = false
              setTimeout(function () {
                that.tips = true
              }, 1500)
              console.log(res)
            }
          })
        }
      }
    }
  }
</script>

<style scoped>
  .top-logo {
    background: url('../../assets/images/logo.png');
    background-size: 100%;
  }

  .btn-sub {
    margin-bottom: 40px;
    margin-top: 30px;
  }

  .btn-sub:hover {
    cursor: pointer;
  }

  .tips {
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.30);
    border-radius: 5px;
    position: fixed;
    top: 0;
    left: 40%;
    width: auto;
    height: 65px;
    z-index: 99;

  }

  .tips img {
    width: 30px;
    height: 30px;
    position: relative;
    margin-top: 18px;
    margin-left: 66px;
  }

  .tips span {
    font-size: 15px;
    color: #3C3C3C;
    letter-spacing: -0.05px;
    line-height: 16px;
    display: inline-block;
    position: relative;
    top: -8px;
    margin-left: 13px;
    padding-right: 66px;
  }
</style>
